<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="所属门店" prop="deptId">
        <treeselect
          style="width: 250px"
          v-model="queryParams.shopId"
          :options="deptList"
          :show-count="true"
          placeholder="请选择门店"
        />
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm"
          align="right"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList()"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini">重置</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      整体情况：
      <br />
      1. 共{{ orderInfo.totalOrderCount }}订单，共{{
        orderInfo.totalCount
      }}菜。A类菜：{{ orderInfo.totalACount }};B类菜：{{
        orderInfo.totalBCount
      }};C类菜：{{ orderInfo.totalCCount }}
      <br />
      2. 菜品平均耗时：{{ dishesInfo.avgConsumeTime }}分钟，历史最优：{{
        dishesInfo.minConsumeTime
      }}分钟；<br />
      A菜品平均耗时：{{ dishesInfo.aavgConsumeTime }}分钟，历史最优：{{
        dishesInfo.aminConsumeTime
      }}分钟；<br />
      B菜品平均耗时：{{ dishesInfo.bavgConsumeTime }}分钟，历史最优：{{
        dishesInfo.bminConsumeTime
      }}分钟；<br />
      C菜品平均耗时：{{ dishesInfo.cavgConsumeTime }}分钟，历史最优：{{
        dishesInfo.cminConsumeTime
      }}分钟；
      <br />
      3. 超时{{timeOutInfo.timeOutOrders}}订单，超时{{timeOutInfo.timeOutDishes}}菜。A类菜{{timeOutInfo.timeOutADishes}}，B类菜{{timeOutInfo.timeOutBDishes}}，C类菜{{timeOutInfo.timeOutCDishes}}
    </el-card>
    <el-tabs
      type="border-card"
      style="margin-top: 20px"
      v-model="tabActive"
      @tab-click="tabClick"
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="是否异常">
          <el-select
            v-model="queryParams.isException"
            clearable
            placeholder="请选择"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option label="正常" value="1"> </el-option>
            <el-option label="异常" value="2"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-tab-pane label="订单情况" name="order">
        <el-table :data="orderTableData" v-loading="loading" stripe>
          <el-table-column prop="code" label="单号"> </el-table-column>
          <el-table-column prop="openTime" label="时间" width="180">
            <template slot-scope="scope">
              {{ parseTime(scope.row.openTime) }}
            </template>
          </el-table-column>
          <el-table-column label="订单耗时">
            <template slot-scope="scope">
              {{scope.row.orderCallTime/60)}}分钟
            </template>
          </el-table-column>
          <el-table-column prop="pointName" label="桌号"> </el-table-column>
          <el-table-column prop="itemLastMoney" label="消费情况">
            <template slot-scope="scope">
              ￥{{ scope.row.itemLastMoney }}
              <span v-if="scope.row.bsKcCount">
                /￥{{
                  (scope.row.itemLastMoney / scope.row.bsKcCount).toFixed(2)
                }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="bsKcCount" label="菜品数量">
            <template slot-scope="scope">
              <span v-if="scope.row.atchTypeMaps['A']">
                高({{ scope.row.atchTypeMaps["A"] }})
              </span>
              <span v-if="scope.row.atchTypeMaps['B']">
                中({{ scope.row.atchTypeMaps["B"] }})
              </span>
              <span v-if="scope.row.atchTypeMaps['C']">
                低({{ scope.row.atchTypeMaps["C"] }})
              </span>
            </template>
          </el-table-column>
                <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="queryOrder(scope.row)"
            >详情</el-button
          >
          <!-- <el-button size="mini" type="text" @click="queryDishes(scope.row)"
            >菜品</el-button
          > -->
        </template>
      </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="initOrderList"
        />
      </el-tab-pane>
      <el-tab-pane label="菜品情况" name="dishes">
        <el-table :data="dishesTableData" v-loading="loading" stripe>
          <el-table-column prop="name" label="菜品"> </el-table-column>
          <el-table-column prop="code" label="单号"> </el-table-column>
          <el-table-column prop="pointName" label="桌号"> </el-table-column>
          <el-table-column prop="callUpTime" label="生效时间">
          </el-table-column>
          <el-table-column prop="cookFinishTime" label="点配时间">
          </el-table-column>
          <el-table-column prop="serveFinishTime" label="点传时间">
          </el-table-column>
          <el-table-column prop="consumeTime" label="出餐耗时">
          </el-table-column>
          <!-- <el-table-column prop="address" label="是否异常"> </el-table-column> -->
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="initKscDataList"
        />
      </el-tab-pane>
      <el-tab-pane label="出餐情况" name="meal">
        <el-table :data="mealTableData" v-loading="loading" stripe>
          <el-table-column prop="address" label="开始时间">
            <template>
              {{ dateRange[0] }}
            </template>
          </el-table-column>
          <el-table-column prop="date" label="结束时间">
            <template>
              <span></span>
              {{ dateRange[1] }}
            </template>
          </el-table-column>
          <el-table-column  label="菜品数量"> 

            <template slot-scope="scope">
              A({{scope.row.bsKcCountA}})B({{scope.row.bsKcCountB}})C({{scope.row.bsKcCountC}})
            </template>

          </el-table-column>
          <el-table-column prop="avgCookTime" label="平均切配耗时">
          </el-table-column>
          <el-table-column prop="avgServeTime" label="平均加工耗时">
          </el-table-column>
          <el-table-column prop="avgTime" label="平均耗时"> </el-table-column>
          <el-table-column prop="consumeTime" label="出餐耗时"> </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="initMealDataList"
        />
      </el-tab-pane>
    </el-tabs>


        <el-dialog title="订单详情" :visible.sync="orderDialog" width="800px">
      <el-descriptions class="margin-top" :column="3" size="mini" border>
        <el-descriptions-item label="单号"
          >{{orderDetais.code}}</el-descriptions-item
        >
        <el-descriptions-item label="桌号">{{orderDetais.pointName}}</el-descriptions-item>
        
        <el-descriptions-item label="应收金额">{{orderDetais.itemOrigMoney}}</el-descriptions-item>
        <el-descriptions-item label="赠送金额">{{orderDetais.itemDiscMoney}}</el-descriptions-item>
        
        <el-descriptions-item label="收款金额">{{orderDetais.itemLastMoney}}</el-descriptions-item>
        <el-descriptions-item label="赠送原因">{{orderDetais.discInfo}}</el-descriptions-item>
        
        <el-descriptions-item label="开台时间">
         {{parseTime(orderDetais.openTime)}}
        </el-descriptions-item>
        <el-descriptions-item label="结算时间"
          >{{parseTime(orderDetais.settleTime)}}</el-descriptions-item
        >
        <el-descriptions-item label="用餐时长"
          >{{orderDetais.dinnerTime}}</el-descriptions-item
        >
        <el-descriptions-item label="第一个菜品上菜时间">{{parseTime(orderDetais.bsKcTime)}}</el-descriptions-item>
        <el-descriptions-item label="最后一个菜品上菜时间">{{parseTime(orderDetais.bsKcLastTime)}}</el-descriptions-item>
        <el-descriptions-item label="菜品数量">{{orderDetais.bsKcCount}}</el-descriptions-item>
        <el-descriptions-item label="订单耗时"> {{calculateMinutesDiff(orderDetais.bsKcTime, orderDetais.bsKcLastTime)}}分钟</el-descriptions-item>
      </el-descriptions>
      <el-table :data="disherList" style="margin-top: 10px;" border>
        <el-table-column property="itemName" label="菜品名称"></el-table-column>
        <el-table-column property="serveFinishTime" label="配菜时间"></el-table-column>
        <el-table-column property="cookFinishTime" label="上菜时间"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { treeselect as listDept } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  getOrderList,
  getKscDataList,
  getOrderDataInfo,
  getTimeOutOrderAndKsc
} from "@/api/liangshi/order";
import {
  getKscListByBsId,
  getKscItemTypeDataInfo,
  getMealStatData,
} from "@/api/liangshi/kcKcs";
export default {
  components: { Treeselect },
  data() {
    return {
      tabActive: "order",
      // 遮罩层
      loading: false,
            orderDialog: false,
      disherList: [],
      orderDetais:{},
      // 总条数
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      orderInfo: {},
      dishesInfo: {},
      timeOutInfo:{},
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const now = new Date();
              const startOfDay = new Date(
                now.getFullYear(),
                now.getMonth(),
                now.getDate()
              );
              const endOfDay = new Date(
                now.getFullYear(),
                now.getMonth(),
                now.getDate(),
                23,
                59,
                59
              );
              picker.$emit("pick", [startOfDay, endOfDay]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dateRange: [],
      deptList: [],
      orderTableData: [],
      dishesTableData: [],
      mealTableData: [],
    };
  },
  created() {
    const now = new Date();
    const startOfDay = new Date(
      now.getFullYear(),
      now.getMonth(),
      now.getDate()
    );
    const endOfDay = new Date(
      now.getFullYear(),
      now.getMonth(),
      now.getDate(),
      23,
      59,
      59
    );
    this.dateRange = [this.parseTime(startOfDay), this.parseTime(endOfDay)];
    this.getDeptList();
    this.getList();
    this.initInfo();
  },
  methods: {
    initInfo() {
      const data = this.addDateRange(this.queryParams, this.dateRange, true);
      getOrderDataInfo(data).then((res) => {
        this.orderInfo = res.data;
      });
      getKscItemTypeDataInfo(data).then((res) => {
        this.dishesInfo = res.data;
      });
      getTimeOutOrderAndKsc(data).then(res=>{
        this.timeOutInfo=res.data;
      })
    },
    initOrderList() {
      this.loading = true;
      const data = this.addDateRange(this.queryParams, this.dateRange, true);
      getOrderList(data).then((res) => {
        this.loading = false;
        this.orderTableData = res.rows;
        this.total = res.total;
      });
    },
    initMealDataList() {
      this.loading = true;
      const data = this.addDateRange(this.queryParams, this.dateRange, true);
      getMealStatData(data).then((res) => {
        this.loading = false;
        this.mealTableData = res.rows;
        this.total = res.total;
      });
    },

    queryOrder(row) {
      this.orderDialog = true;
      this.orderDetais=row;
      getKscListByBsId({bsId:row.id}).then(res=>{
        this.disherList=res.rows;
      })
    },

    initKscDataList() {
      this.loading = true;
      const data = this.addDateRange(this.queryParams, this.dateRange, true);
      getKscDataList(data).then((res) => {
        this.loading = false;
        this.dishesTableData = res.rows;
        this.total = res.total;
      });
    },
    getList() {
      this.initInfo();
      this.tabClick();
    },
    getDeptList() {
      listDept().then((res) => {
        this.deptList = res.data;
      });
    },
    tabClick() {
      this.queryParams.pageNum = 1;
      this.total = 1;
      switch (this.tabActive) {
        case "order":
          this.initOrderList();
          break;
        case "dishes":
          this.initKscDataList();
          break;
        case "meal":
          this.initMealDataList();
          break;
      }
    },
  },
};
</script>

<style>
</style>